<html>

<head>
    <meta charset="utf-8" />
    <script type="text/javascript" src="dependencies/jquery.js"></script>
    <script src='dependencies/curriculum.js'></script>
    <script>
        var param = window.location.href.slice(document.URL.search('\\?'));
        var semester = param.slice(-13, -2);
    </script>

    <style>
        #curriculum {
            width: 100%;
        }
    </style>
</head>

<body>
    <div style="padding-bottom: 1em;">
        <h2 style="display: inline;">课程表</h2>
        <button id='ret' type='button'>返回</button>
        <p style="margin: 0;"></p>
        <script>
            $("p").html("当前学期" + semester + ".");
        </script>
    </div>


    <table id='curriculum' border='1'>
        <thead>
            <th>
            <td>节次</td>
            <td>周日</td>
            <td>周一</td>
            <td>周二</td>
            <td>周三</td>
            <td>周四</td>
            <td>周五</td>
            <td>周六</td>
            </th>
        </thead>
        <tbody>
            <!-- 上午 -->
            <tr id='c1'>
                <td rowspan="4">上午</td>
                <td>第 1 节课</td>
                <td id='c1w7'></td>
                <td id='c1w1'></td>
                <td id='c1w2'></td>
                <td id='c1w3'></td>
                <td id='c1w4'></td>
                <td id='c1w5'></td>
                <td id='c1w6'></td>
            </tr>
            <tr id='c2'>
                <td>第 2 节课</td>
                <td id='c2w7'></td>
                <td id='c2w1'></td>
                <td id='c2w2'></td>
                <td id='c2w3'></td>
                <td id='c2w4'></td>
                <td id='c2w5'></td>
                <td id='c2w6'></td>
            </tr>
            <tr id='c3'>
                <td>第 3 节课</td>
                <td id='c3w7'></td>
                <td id='c3w1'></td>
                <td id='c3w2'></td>
                <td id='c3w3'></td>
                <td id='c3w4'></td>
                <td id='c3w5'></td>
                <td id='c3w6'></td>
            </tr>
            <tr id='c4'>
                <td>第 4 节课</td>
                <td id='c4w7'></td>
                <td id='c4w1'></td>
                <td id='c4w2'></td>
                <td id='c4w3'></td>
                <td id='c4w4'></td>
                <td id='c4w5'></td>
                <td id='c4w6'></td>
            </tr>
            <!-- 下午 -->
            <tr id='c5'>
                <td rowspan="5">下午</td>
                <td>第 5 节课</td>
                <td id='c5w7'></td>
                <td id='c5w1'></td>
                <td id='c5w2'></td>
                <td id='c5w3'></td>
                <td id='c5w4'></td>
                <td id='c5w5'></td>
                <td id='c5w6'></td>
            </tr>
            <tr id='c6'>
                <td>第 6 节课</td>
                <td id='c6w7'></td>
                <td id='c6w1'></td>
                <td id='c6w2'></td>
                <td id='c6w3'></td>
                <td id='c6w4'></td>
                <td id='c6w5'></td>
                <td id='c6w6'></td>
            </tr>
            <tr id='c7'>
                <td>第 7 节课</td>
                <td id='c7w7'></td>
                <td id='c7w1'></td>
                <td id='c7w2'></td>
                <td id='c7w3'></td>
                <td id='c7w4'></td>
                <td id='c7w5'></td>
                <td id='c7w6'></td>
            </tr>
            <tr id='c8'>
                <td>第 8 节课</td>
                <td id='c8w7'></td>
                <td id='c8w1'></td>
                <td id='c8w2'></td>
                <td id='c8w3'></td>
                <td id='c8w4'></td>
                <td id='c8w5'></td>
                <td id='c8w6'></td>
            </tr>
            <tr id='c9'>
                <td>第 9 节课</td>
                <td id='c9w7'></td>
                <td id='c9w1'></td>
                <td id='c9w2'></td>
                <td id='c9w3'></td>
                <td id='c9w4'></td>
                <td id='c9w5'></td>
                <td id='c9w6'></td>
            </tr>
            <!-- 晚上 -->
            <tr id='c10'>
                <td rowspan="3">晚上</td>
                <td>第 10 节课</td>
                <td id='c10w7'></td>
                <td id='c10w1'></td>
                <td id='c10w2'></td>
                <td id='c10w3'></td>
                <td id='c10w4'></td>
                <td id='c10w5'></td>
                <td id='c10w6'></td>
            </tr>
            <tr id='c11'>
                <td>第 11 节课</td>
                <td id='c11w7'></td>
                <td id='c11w1'></td>
                <td id='c11w2'></td>
                <td id='c11w3'></td>
                <td id='c11w4'></td>
                <td id='c11w5'></td>
                <td id='c11w6'></td>
            </tr>
            <tr id='c12'>
                <td>第 12 节课</td>
                <td id='c12w7'></td>
                <td id='c12w1'></td>
                <td id='c12w2'></td>
                <td id='c12w3'></td>
                <td id='c12w4'></td>
                <td id='c12w5'></td>
                <td id='c12w6'></td>
            </tr>
        </tbody>
    </table>

    <script>
        $("#ret").click(function () {
            window.location.href = "mainpage.html" + param;
        });

        var queryurl = "http://47.108.67.131/timetable_api/v1/timetables";
        $.ajax({
            url: queryurl + param,
            method: "GET",
            dataType: 'json',
            success: function (courses) {
                courses = courses.xkxx[0];
                // console.log(courses);
                for (let i in courses) {
                    let course = courses[i].timeAndPlaceList[0];
                    if (course == undefined) continue;
                    let day = course.classDay;
                    let start = course.classSessions;
                    let len = course.continuingSession;
                    let info = formCourseInfo(courses[i]);
                    // console.log(day, start, len, info);
                    addCourse(day, start, len, info);
                }
                // background color (random)
                // var colors = [
                //     "rgba(96, 190, 202, 0.4)",
                //     "rgba(51, 255, 186, 0.4)",
                //     "rgba(138, 51, 255, 0.4)",
                //     "rgba(255, 230, 51, 0.4)",
                //     "rgba(255, 51, 51, 0.4)",
                //     "rgba(255, 150, 51, 0.4)",
                //     "rgba(255, 51, 165, 0.4)",
                //     "rgba(197, 51, 255, 0.4)",
                //     "rgba(86, 255, 51, 0.4)",
                //     "rgba(51, 51, 165, 0.4)",
                //     "rgba(114, 255, 51, 0.4)",
                // ];

                $(".courseinfo").parent("td").each(function (idx, elem) {
                    var randomColorVal = () => { return Math.floor(Math.random() * 255); };
                    var color = "rgba(" + randomColorVal() + ", " + randomColorVal() + ", " + randomColorVal() + ", 0.4)";
                    $(this).css("background", color);
                    // $(this).css("background", colors[Math.floor(Math.random() * colors.length)]);
                });
            }
        });

    </script>

</body>

</html>